﻿<?php
@session_start();
if($_GET['logout'] == "true") {
	$fp = fopen("log.html", "a+");
	fwrite($fp, "<div class='msgln'>(".date("g:i A").") User <b>".$_SESSION['name']."</b><i> is logout!</i></div>\n");
	fclose($fp);
	session_destroy();
}
	function login_form() {
		echo '
			<div id="loginform">
				<form method="post" action="">
					name <input type="text" name="name" id="name" />
					<input type="submit" name="enter" id="enter" value="submit" />
				</form>
			</div>
		';
	}
	if(isset($_POST['enter'])) {
		if($_POST['name'] != null) {
			$_SESSION['name'] = htmlspecialchars($_POST['name']);
		} else {
			print '<span id="error"> Please enter name </span>';
		}
	}
?>
<html>
	<head>
	
		<style type='text/css'>
			body {
				margin: 0px;
				padding: 0px;
				font: 12px times new roman;
			}
			form, p, span {
				margin: 0px;
				padding: 0px;
			}
			a {
				text-decoration: none;
				color: black;
			}
			a:hover {
				text-decoration: underline;
				color: blue;
			}
			input {
				font: 12px arial black;
				
			}
			#chat {
				margin: 0px auto;
				padding-bottom: 20px;
				background-color: #ebf4fb;
				width: 500px;
				border: 1px solid black;
				padding: 15px;
			}
			#chatBox {
				text-align: left;
				margin: 0px auto;
				margin-bottom: 20px;
				padding: 10px;
				width: 450px;
				height: 250px;
				border: 1px solid black;
				overflow: auto;
			}
			#usermsg {
				width: 390px;
				border: 2px solid yellow;
			}
			#submit {
				width: 60px;
				color: red;
			}
			.welcome {
				float: left;
			}
			.logout {
				float: right;
			}
		
		</style>
	<script src="jquery.js" type="text/javascript" ></script>
   <script type="text/javascript" >
	$(function(){
	
	
		$("#submitmsg").click(function(){
			var message = $("#usermsg").val();
			$.post("post.php", {text: message});
			$("#usermsg").attr("value" , "");
			return false;
		});
		
		
		
		
		
		
		
		
		function loadLog() {
			var oldScrollHeight = $("#chatBox").attr("scrollHeight") - 20;
			$.ajax({
				url: "log.html",
				cache: false,
				success: function(html) {
					$("#chatBox").html(html);
					var newscrollHeight = $("#chatBox").attr("scrollHeight") - 20;
					if(newscrollHeight>oldScrollHeight) {
						$("#chatBox").animate({ scrollTop: newscrollHeight}, 'normal');
					}
				}
			});
		}
		
		
		
		setInterval(loadLog, 500);
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		$("#exit").click(function(){
			var exit = confirm("Are u sure to wont to exit ?");
			if(exit == true) {
				window.location = 'index.php?logout=true';
			}
		});
		
		
		
		
		
		$("#emoticons").click(function(){
			 var commentArea = $('#usermsg').val();
			 var code = $(this).attr('title');
			 var codee = commentArea + code;
			 
			 
			
				$("#usermsg").html(codee);
							
		});
		
	});
   </script>
	</head>
	
	<body>
		<?php
			if(!$_SESSION['name']) {
				login_form();
			}
			else {
			$name = $_SESSION['name'];
		?>
		<div id='chat'>
			<div id='menu'>
				<p class='welcome'>Welcome, <?php echo $name ?> </p>
				<p class='logout'><a href='#' id='exit'>Exit</a></p>
				<div id='' style='clear: both;'></div>
			</div>
			
			
				<div id='chatBox'></div>
				
				<div id='emoticons'>
				<form name='message' method='post' action=''> 
				<a href='javascript: void(0)' title=':)'><img src='http://files.myopera.com/supergreatChandu8/albums/5466862/face-smile.png' width='20px' height='20px' alt=':)' /></a>
				<br />
					<input type='text' name='usermsg' id='usermsg' size='60' />
					<input type="submit" name="submit" id='submitmsg' value="submitmsg" />
				</form>
				</div>
		</div>
		
		<?php
		}
		?>
	</body>
</html>